<template>
  <div class="menu-container" :class="{ narrow: isNarrow }">
    <el-menu
      style="overflow-y: auto"
      router
      :default-active="$route.path"
      active-text-color="#ffffff"
      :default-openeds="defaultOpenMenuArr"
      text-color="#000"
      background-color="#FFFFFF"
      :collapse-transition="false"
      :collapse="isNarrow"
      :unique-opened="true"
    >
      <div class="menu-top-info">
        <!-- class="el-menu-switch" -->
        <p class="title">Alex Dunphy</p>
        <p class="info">12345 | 骨科</p>
        <p class="user-desc">超级管理员</p>
      </div>
      <div v-for="(item, index) in menuList" :key="index">
        <el-menu-item
          :index="item.path"
          :key="item.path"
          :class="[{ parentHigh: item.active }]"
          @click="onClickMenuItem(item.path)"
        >
          <i class="icon-left" :class="item.icon"></i>
          <!--:class="'m'+item.id"-->
          <span slot="title" class="title-font">{{ item.name }}</span>
          <i class="el-icon-caret-right right-arrow"></i>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: {
    isNarrow: {
      type: Boolean,
      default: false,
    },
    telegramCount: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      defaultOpenMenuArr: [],
      activeUrl: "/index",
      currenPath: "",
      params: {},
      menuList: [
        {
          icon: "el-icon-s-help",
          path: "/caseStatistics",
          name: "病例统计",
        },
        {
          icon: "el-icon-upload",
          path: "/uploadCase",
          name: "上传病例",
        },
        {
          icon: "el-icon-s-marketing",
          path: "/detectionStatus",
          name: "检测状态",
        },
        {
          icon: "el-icon-s-order",
          path: "/historicalReport",
          name: "历史报告",
        },
        {
          icon: "el-icon-s-custom",
          path: "/userManagement",
          name: "用户管理",
        },
      ], //菜单数据
    };
  },
  created() {
    /* this.getMenuList();
      this.setMenu();
      this.userType = localStorage.getItem('userType'); */
  },
  methods: {
    /*设置左侧菜单栏 场景适用于刷新时记住当前选中的菜单*/
    setMenu() {
      this.params = this.$route.query;
      this.currenPath = this.params.indexUrl;
      this.resetMenuList(this.$route.path);
    },
    //设置当前url高亮
    onClickMenuItem(url) {
      /*此处通过url 进行匹配 只有父级的菜单*/
      if (
        url === "/index" ||
        url === "/mapRealtime" ||
        url === "/flightReportManage"
      ) {
        this.currenPath = "";
        this.defaultOpenMenuArr = [this.currenPath];
      } else {
        this.currenPath = url;
      }
    },
    /*params:
     * parentUrl-->父级Url
     * */
    resetMenuList(parentUrl) {
      parentUrl = "/" + parentUrl.split("/")[1];
      this.menuList &&
        this.menuList.map((item) => {
          if (parentUrl === item.path) {
            this.$set(item, "active", true);
          } else if (parentUrl !== item.path && item.children.length > 0) {
            this.$set(item, "active", false);
            item.children.forEach((val) => {
              if (parentUrl === val.path) {
                this.currenPath = item.path;
                this.$set(item, "active", true);
                this.$set(val, "active", true);
              } else {
                this.$set(val, "active", false);
              }
            });
          } else {
            this.$set(item, "active", false);
            if (item.children && item.children.length > 0) {
              item.children.forEach((val) => {
                this.$set(val, "active", false);
              });
            }
          }
        });
    },
    //左侧菜单数据
    getMenuList() {
      this.menuList = JSON.parse(sessionStorage.getItem("menuList"));
      let btnLists = [];
      this.menuList &&
        this.menuList.map((item) => {
          if (item.buttonList.length > 0) {
            item.buttonList.forEach((btn) => {
              btnLists = btnLists.concat(btn.powerName);
            });
          }
          if (item.path === "/flightSchedule") {
            item.icon = "icon-ali-dianzijinchengdan";
          } else if (item.path === "/flightPlanManageParent") {
            item.icon = "icon-ali-feihangjihuaguanli";
          } else if (item.path === "/systemSettings") {
            item.icon = "icon-ali-xitongshezhi";
          } else if (item.path === "/statisticsManagement") {
            item.icon = "icon-ali-dengtongjiguanli";
          } else if (item.path === "/personnelManagement") {
            item.icon = "icon-ali-renyuanguanli";
          } else if (item.path === "/specificSentimentManagement") {
            item.icon = "icon-ali-qingkuangchuzhi";
          } else if (item.path === "/messageCenter") {
            item.icon = "icon-ali-xiaoxizhongxinzuolan";
            btnLists.push(item.powerName);
          } else if (item.path === "/templateManagement") {
            item.icon = "icon-ali-mobanxiaoxiguanli";
          } else if (item.path === "/accountManageParent") {
            item.icon = "icon-ali-xitongguanli";
          }
          if (item.children.length > 0) {
            item.children.forEach((obj) => {
              obj.buttonList.forEach((btn) => {
                btnLists = btnLists.concat(btn.powerName);
              });
            });
          }
        });
      sessionStorage.setItem("btnLists", JSON.stringify(btnLists));
    },
  },
  watch: {
    isNarrow(val) {
      if (!val) {
        this.defaultOpenMenuArr = [this.currenPath];
      }
    },
    $route() {
      this.resetMenuList(this.$route.path);
    },
  },
};
</script>
<style scoped>
.menu-container {
  cursor: pointer;
  box-sizing: border-box;
}

.menu-container .title-font {
  padding-left: 6px;
  font-size: 14px;
  font-weight: normal;
}

.menu-container .el-menu {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-right: 0;
  font-weight: 700;
}

.menu-container .el-menu::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0, 0, 0, 0);
}

.menu-container .el-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0);
}

.menu-container >>> .el-menu-item {
    position: relative;
    height: 45px;
    line-height: 41px;
    /* line-height: 45px; */
    margin: 0 10px;
    border-radius: 5px;
}



/*滑过展开的一级菜单的父级样式*/
.menu-container li:hover {
  color: #ffffff;
  background-color: #4867E5 !important;
}
.menu-container li:hover .right-arrow{
  color: #ffffff;
  display: block;
}

.menu-container .el-menu-item:hover span,
.menu-container .el-menu-item:hover i {
  color: #fff;
}

/*下拉框子级的样式*/
.menu-container .el-menu--inline .el-menu-item span {
  padding-left: 38px;
}

/*一级选中后的高亮*/
.menu-container .parentHigh {
  color: #ffffff !important;
  background-color: #4867E5 !important;
  padding-left: 8px;
}



.menu-container .parentHigh:hover {
  background-color: #4867E5 !important;
}

.menu-container .parentHigh:hover span,
.menu-container .parentHigh:hover i {
  color: #fff;
}

/*父节点选中后的高亮*/
.menu-container .parentClass {
  color: #fff !important;
  background-color: #4867E5 !important;
  margin: 0 -20px 0 -8px;
  padding-left: 8px;
}

.menu-container .parentClass .icon {
  color: #4867E5;
}


/*默认icon 颜色*/
.menu-container >>> i.icon-left {
  font-size: 17px;
  font-weight: normal;
  color: #4867e5;
}

.menu-container >>> .right-arrow{
    position: absolute;
    right: 10px;
    top: 15px;
    font-size: 14px;
    display: none;
}

/* 菜单 用户信息 */
.menu-top-info {
  height: 130px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  align-items: center;
  font-weight: normal;
}
.menu-top-info .title {
  font-size: 15px;
}
.menu-top-info .info {
  color: #606e86;
  padding: 10px 0;
}
.menu-top-info .user-desc {
  color: #c4cad2;
}
</style>
